@import '~sassvar';
$gap: 24px;

.misc-page-insurance-accept {
  min-height: 100vh;
  padding-bottom: 120px;
  background: #EF5239
  no-repeat;
  background-size: 100% auto;

  .img {
    background-repeat: no-repeat;
    background-size: cover;
  }

  .img01 {
    height: 714px;
    background-image: url('~./1.jpg');
  }

  .img02 {
    height: 3074px;
    background-image: url('~./2.jpg');
  }

  .img03 {
    height: 3570px;
    background-image: url('~./3.jpg');
  }

  .rule-mask {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 100;
    background: rgba(0, 0, 0, .65);
  }

  .rule-bd {
    overflow: hidden;
    position: fixed;
    top: 50%;
    left: 50%;
    display: flex;
    flex-direction: column;
    z-index: 110;
    margin: -501px 0 0 -340px;
    width: 680px;
    height: 1002px;
    background: #fff;
    border-radius: 6px;
    background-size: cover;

    .btn {
      line-height: 88px;
      font-size: 30px;
      color: #fff;
      text-align: center;
      background: #66BAFF;
    }
  }

  .rule-container {
    flex: 1 1 auto;
    overflow: auto;
    padding: 20px;

    h3 {
      text-align: center;
      margin-bottom: 10px;
      font-size: 32px;
    }

    p {
      margin-bottom: 10px;
    }
  }

  .float-window {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    height: 100px;
    background: #fff;
  }

  .item {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;

    strong {
      line-height: 48px;
      font-size: 34px;
      font-weight: bold;
    }

    small {
      line-height: 28px;
    }
  }

  .item01 {
    flex: 1 1 auto;
    flex-direction: row;
    justify-content: flex-start;
    padding-left: 28px;
    font-size: 24px;

    .radio {
      margin-right: 12px;
    }
  }

  .item02 {
    width: 230px;
    color: #66BAFF;
    border: 2px solid #66BAFF;
  }

  .item03 {
    width: 320px;
    color: #fff;
    background: #66BAFF;
  }

  .vaccine-order-contact-card {
    margin: 0 24px 16px 24px;
    border-radius: 20px;
  }

  .card-bd {
    padding: 26px 6px;
    line-height: 44px;

    h3 {
      font-size: 30px;
      margin-bottom: 10px;
    }

    p {
      margin-bottom: 7px;
      color: $text-normal-light;
    }
  }

  .date-info {
    margin: 0 24px 16px 24px;
    border-radius: 20px;
    padding: 26px 6px;
    line-height: 44px;
    background: #fff;
  }

  .date-info-item {
    margin-left: 30px;
  }

  .date-info-item:not(:last-child) {
    border-bottom: 1px solid #e6e6e6;

    .placeholder {
      color: #757575;
    }
  }

  .date-info-item-bd {
    padding: 0 30px 0 10px;
    font-size: 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .date-info-item-ft {
    display: inline-block;
    padding: 7px 10px;
  }
  
  .warning-text {
    line-height: 25px;
    color: #EF5239;
    font-size: 18px;
  }

  .border-bottom {
    margin: 0 0 6px;
    border-bottom: 1px solid #E6E6E6;
  }

  .datepicker-label {
    align-items: center;

    img {
      width: 34px;
      margin-left: 10px;
    }
  }
}

.misc-page-insurance-accept-success {
  padding: 100px $gap 0 $gap;

  .success-detail {
    text-align: center;
    line-height: 38px;
    padding-bottom: 68px;

    img {
      width: 130px;
    }

    h2 {
      margin-top: 20px;
      font-size: 30px;
      font-weight: bolder;
      color: #8FD945;

      &.fail {
        color: #FF9600;
      }
    }

    p {
      margin: 10px 0 80px 0;
      font-size: 28px;
    }

    small {
      color: $text-normal-light;
    }
  }

  .card {
    margin-bottom: 20px;
  }

  .card-bd {
    padding: 26px 6px;
    line-height: 44px;

    h3 {
      font-size: 30px;
      margin-bottom: 10px;
    }

    p {
      margin-bottom: 7px;
      color: $text-normal-light;
    }
  }

  .success-detail-button {
    display: inline-block;
    width: 340px;
    height: 88px;
    text-align: center;
    color: #fff;
    font-size: 30px;
    background:rgba(102,186,255,1);
    border-radius: 44px;
    border: none;
  }

  .app-download {
    margin-left: -1 * $gap;
    margin-right: -1 * $gap;
  }
}